<template>
	<view class="page">
		<image class="heads" src="@/static/images/heads.png" mode="widthFix"></image>
		<view class="positioning flex row-right" @click="get_Location">
			<image class="m-r-20" src="@/static/images/ding.png" mode=""></image>
			<view>{{ cityName }}</view>
		</view>
		<view class="m-b-22">
			<u-swiper @click="click" :list="list" keyName="image" :height="160" :autoplay="false" circular></u-swiper>
		</view>
		<view style="border: 1px solid #fff;border-radius: 10rpx;padding:5rpx 10rpx;">
			<!-- <u-notice-bar @click="goArticle" bgColor="#457FD3" color="#fff" direction="column" :text="newsList"></u-notice-bar> -->
			<u-notice-bar @click="goArticle" bgColor="#457FD3" color="#fff" :text="text"></u-notice-bar>
		</view>
		<view class="lr flex row-between col-center m-t-25 m-b-22">
			<view @click="tabs(1)" class="lr-v flex col-center row-center">
				<image src="@/static/images/left.png" mode=""></image>
				<view>高速护送查询</view>
			</view>
			<view @click="tabs(2)" class="lr-v flex col-center row-center">
				<image src="@/static/images/right.png" mode=""></image>
				<view>国道护送查询</view>
			</view>
		</view>
		<view class="boxes flex col-center row-between flex-wrap">
			<view @click="tabs(3,index)" class="text-center col-center" v-for="(item,index) in itemsList" :key="index" v-if="item.is_show==1">
				<image style="width: 75rpx;height: 75rpx;" :src="item.image" mode=""></image>
				<view>{{item.name}}</view>
				<view class="num" v-if="item.name=='货物信息'&&houwu_num!=0">{{houwu_num}}</view>
			</view>
			<!-- <view @click="tabs(4)" class="text-center col-center">
				<image style="width: 75rpx;height: 75rpx;" src="@/static/images/index2.png" mode=""></image>
				<view>货物信息</view>
			</view>
			<view @click="tabs(5)" class="text-center col-center">
				<image style="width: 75rpx;height: 75rpx;" src="@/static/images/index3.png" mode=""></image>
				<view>收费站信息查询</view>
			</view>
			<view @click="tabs(6)" class="text-center col-center">
				<image style="width: 75rpx;height: 75rpx;" src="@/static/images/index1.png" mode=""></image>
				<view>勘验人员查询</view>
			</view>
			<view @click="tabs(7)" class="text-center col-center">
				<image style="width: 75rpx;height: 75rpx;" src="@/static/images/index1.png" mode=""></image>
				<view>法律援助</view>
			</view>
			<view @click="tabs(8)" class="text-center col-center">
				<image style="width: 75rpx;height: 75rpx;" src="@/static/images/index1.png" mode=""></image>
				<view>货物保险</view>
			</view> -->
		</view>
		<view class="service m-t-12" @click="tabs(9)">
			<view class="s-top flex col-center row-between">
				<view>在线客服</view>
				<u-icon name="arrow-right" color="#515151" size="14"></u-icon>
			</view>
			<image src="@/static/images/kefu.png" mode=""></image>
		</view>
		<u-loading-page loadingText='加载中' bgColor="#457FD3" color="#fff" :loading="loading"></u-loading-page>
	</view>
</template>

<script>
const app = getApp();
import { modal } from '@/utils/tools';
export default {
	data() {
		return {
			loading:false,
			// 当前选择的城市
			cityName: '阜阳市',
			cityCode: '341200',
			list: [
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				// },
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				// 	title: '身无彩凤双飞翼，心有灵犀一点通'
				// },
				// {
				// 	image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				// 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				// }
			],
			text:'',
			textid:'',
			// newsList:['这是公告一'],
			// newsList2:[],
			itemsList:[
				// {name:'超限证申报',image:'../../static/images/index2.png',is_show:1}
			],
			houwu_num:0
		};
	},
	onLoad() {
		
	},
	onShow() {
		if(!app.globalData.ifshiming && uni.getStorageSync('token')){
			modal({
				title:'您还未实名认证!',
				msg:'去认证',
				stu:1,
				url:'/pages/main/main'
			})
		}
		if(uni.getStorageSync('cityName') || uni.getStorageSync('cityCode')){
			this.cityName = uni.getStorageSync('cityName');
			this.cityCode = uni.getStorageSync('cityCode');
		}else{
			this.getCurrentCity();
		}
		
		this.getindex();
	},
	methods: {
		async getindex(){
			this.loading = true;
			let res = await this.$api.getindex({
				old_id:uni.getStorageSync('old_id')?uni.getStorageSync('old_id'):'0'
			});
			if (res.code == 1) {
				// console.log(res.data)
				// console.log(res.data.page.data[1].content.data)
				this.list = res.data.page.data[1].content.data;
				this.text = res.data.notice.title;
				this.textid = res.data.notice.id;
				this.itemsList = res.data.page.data[2].content.data;
				// this.newsList2 = res.data.page.data[4].content;
				// if(this.newsList2.length>0){
				// 	this.newsList2.forEach(item=>{
				// 		this.newsList.push(item.msg)
				// 	})
				// }
				this.houwu_num = res.data.houwu_num;
				this.loading = false;
			}
		},
		// 查看公告
		goArticle(){
			uni.navigateTo({
				url:'/pages/index/message/message?id='+this.textid
			})
		},
		// 选择城市
		get_Location() {
			uni.navigateTo({
				url: '/pages/index/city/city'
			});
		},
		getCurrentCity() {
			uni.getFuzzyLocation({
				type: 'wgs84',
				success: (res) => {
					console.log(res)
					this.reverseGeocode(res.latitude, res.longitude);
				},
				fail: (err) => {
					console.log(err)
					uni.setStorageSync('cityName','阜阳市');
					uni.setStorageSync('cityCode','341200');
					this.$toast({
						title: '无法获取位置信息'
					})
				}
			});
		},
		reverseGeocode(lat, lon) {
			const key = 'ADWBZ-3R7LB-HPEUC-J4ZN7-SPB6Z-L3B6H'; // 这里填入你的腾讯位置服务key
			const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lon}&key=${key}`;
			uni.request({
				url,
				success: (res) => {
					console.log(res);
					if (res.statusCode === 200 && res.data.status === 0) {
						this.cityName = res.data.result.address_component.city;
						this.cityCode = res.data.result.ad_info && res.data.result.ad_info.adcode;
						uni.setStorageSync('cityName',this.cityName);
						uni.setStorageSync('cityCode',this.cityCode);
						console.log(this.cityName, this.cityCode); //阜阳市,  341203
					} else {
						uni.setStorageSync('cityName','阜阳市');
						uni.setStorageSync('cityCode','341200');
						this.$toast({
							title: res.data.message
						})
					}
				},
				fail: () => {
					uni.setStorageSync('cityName','阜阳市');
					uni.setStorageSync('cityCode','341200');
					this.$toast({
						title: '网络请求失败'
					})
				}
			});
		},
		// 轮播图
		click(e){
			console.log(this.list[e].link)
			let type = this.list[e].link.type;
			if(type=="article"){
				uni.navigateTo({
					url:'/pages/index/message/message?id='+this.list[e].link.id
				})
			}else if(type=="shop"){
				uni.navigateTo({
					url:this.list[e].link.path
				})
			}else if(type=="custom"){
				uni.navigateTo({
					url: "/pages/index/webview/webview?url=" + this.list[e].link.query.url
				});
			}
		},
		tabs(num,index){
			if(!uni.getStorageSync('token')){
				modal({
					title:'您还未登录!',
					msg:'去登录',
					url:'/pages/login/login'
				})
				return
			}
			if(num==1){
				uni.navigateTo({
					url:'/pages/index/escort/escort?type=1'
				})
			}else if(num==2){
				uni.navigateTo({
					url:'/pages/index/escort/escort?type=2'
				})
			}else if(num==3){
				// console.log(this.itemsList[index].link.path);
				let url = this.itemsList[index].link.path;
				uni.navigateTo({
					url:url
				})
			}else if(num==9){
				uni.navigateTo({
					url:'/pages/index/service/service'
				})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	padding: 0 25rpx;
	.heads {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		width: 100%;
	}
	.positioning {
		color: #fff;
		font-size: 30rpx;
		padding: 38rpx 0;
		image {
			width: 20rpx;
			height: 30rpx;
		}
	}
	.lr{
		font-size: 30rpx;
		color: #fff;
		.lr-v{
			width: 330rpx;
			height: 130rpx;
			border: 1px solid #fff;
			border-radius: 20rpx;
			
			image{
				width: 60rpx;
				height: 56rpx;
				margin-right: 18rpx;
			}
		}
	}
	.boxes{
		background: #fff;
		border:1px solid #CECECE;
		border-radius: 25rpx;
		padding: 20rpx 0;
		color: #515151;
		
		.text-center{
			width: 33.33%;
			margin: 20rpx 0;
			position: relative;
			
			.num{
				position: absolute;
				top: -10rpx;
				right: 55rpx;
				background: red;
				color: #fff;
				width: 35rpx;
				height: 35rpx;
				line-height: 35rpx;
				border-radius: 50%;
				font-size: 22rpx;
			}
		}
	}
	.service{
		border:1px solid #CECECE;
		border-radius: 25rpx;
		color: #515151;
		.s-top{
			margin: 15rpx 30rpx 15rpx 30rpx;
		}
		
		image{
			width: 100%;
			height: 117rpx;
		}
	}
}
</style>
